<script setup>
import HomePanel from './HomePanel.vue'
import { ref, onMounted } from 'vue'
import { getGoodsProductAPI } from '@/apis/home'
import GoodsItem from '@/components/GoodsItem.vue'

// 商品列表数据
const goodsList = ref([])

// 获取商品列表数据
const getGoodsList = async () => {
  const res = await getGoodsProductAPI()
  goodsList.value = res.data.list.map((item) => ({
    id: item.id,
    productName: item.productName,
    description: item.description,
    price: item.price,
    picture: item.picture,
    orderNum: item.sales
  }))
}

onMounted(() => {
  getGoodsList()
})
</script>

<template>
  <div class="home-product">
    <HomePanel title="商品列表">
      <template #main>
        <div class="goods-list">
          <GoodsItem v-for="goods in goodsList" :key="goods.id" :good="goods" />
        </div>
      </template>
    </HomePanel>
  </div>
</template>

<style scoped lang="scss">
.home-product {
  background: #fff;
  margin-top: 20px;

  .goods-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px 20px;

    :deep(.goods-item) {
      width: 20%;
      padding: 10px;

      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }
    }
  }
}
</style>
